<template>
  <div>
    <el-table :data="pagedTableData" style="width: 100%;margin-bottom: 1vh;">
      <el-table-column prop="year" label="年度" width="80"></el-table-column>
      <el-table-column prop="activityName" label="会议及活动名称"></el-table-column>
      <el-table-column prop="academyianExpert" label="院士 专家"></el-table-column>
      <el-table-column prop="location" label="地点"></el-table-column>
      <el-table-column prop="date" label="时间"></el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="totalItems"
      :page-size="pageSize"
      :current-page.sync="currentPage"
      @current-change="handleCurrentChange"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        // 这里是你的数据数组
        {
          year: '2023',
          activityName: '水电五局第六届科技大会，驻站专家聘书',
          academyianExpert: '傅少君',
          location: '成都',
          date: '2023-04-28'
        },
        {
          year: '2023',
          activityName: '水电五局第六届科技大会，驻站专家聘书',
          academyianExpert: '傅少君',
          location: '成都',
          date: '2023-04-28'
        },
        {
          year: '2023',
          activityName: '水电五局第六届科技大会，驻站专家聘书',
          academyianExpert: '傅少君',
          location: '成都',
          date: '2023-04-28'
        },
        {
          year: '2023',
          activityName: '水电五局第六届科技大会，驻站专家聘书',
          academyianExpert: '傅少君',
          location: '成都',
          date: '2023-04-28'
        },
        {
          year: '2023',
          activityName: '水电五局第六届科技大会，驻站专家聘书',
          academyianExpert: '傅少君',
          location: '成都',
          date: '2023-04-28'
        },
        {
          year: '2023',
          activityName: '水电五局第六届科技大会，驻站专家聘书',
          academyianExpert: '傅少君',
          location: '成都',
          date: '2023-04-28'
        },
        {
          year: '2023',
          activityName: '水电五局第六届科技大会，驻站专家聘书',
          academyianExpert: '傅少君',
          location: '成都',
          date: '2023-04-28'
        },
        {
          year: '2023',
          activityName: '水电五局第六届科技大会，驻站专家聘书',
          academyianExpert: '傅少君',
          location: '成都',
          date: '2023-04-28'
        },
        {
          year: '2023',
          activityName: '水电五局第六届科技大会，驻站专家聘书',
          academyianExpert: '傅少君',
          location: '成都',
          date: '2023-04-28'
        },
        {
          year: '2023',
          activityName: '水电五局第六届科技大会，驻站专家聘书',
          academyianExpert: '傅少君',
          location: '成都',
          date: '2023-04-28'
        },
        {
          year: '2023',
          activityName: '水电五局第六届科技大会，驻站专家聘书',
          academyianExpert: '傅少君',
          location: '成都',
          date: '2023-04-28'
        },
        // 其他数据...
      ],
      currentPage: 1, // 当前页
      pageSize: 10, // 每页显示的数据量
    };
  },
  computed: {
    // 计算当前分页下要显示的数据
    pagedTableData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.tableData.slice(start, end);
    },
    totalItems() {
      // 总条目数
      return this.tableData.length;
    }
  },
  methods: {
    handleCurrentChange(val) {
      this.currentPage = val;
    }
  }
};
</script>

<style scoped>
/* 样式可以根据需要调整 */
</style>
